<template>
  <span class="icon-comp i-icon">
    <i
      v-if="name.indexOf('el-icon') !== -1"
      :class="name"
      :style="{ color, 'font-size': size + 'px' }"
      style="margin-right: 4px"
    ></i>
    <component
      v-if="name.indexOf('el-icon') === -1"
      :theme="theme"
      :size="size"
      :strokeWidth="strokeWidth"
      style="margin-right: 4px"
      :is="name"
      class="d_icon menu-icon"
    />
    <!--<component :is="name"/>-->
    <!--  <el-icon v-if="type === 'el-icon'" :style="{ color, 'font-size': size + 'px' }" class="">-->
    <!--    <component :is="name" />-->
    <!--  </el-icon>-->
  </span>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: "icon-park"
  },
  size: {
    default: 14
  },
  color: {
    type: String,
    default: ""
  },
  theme: {
    type: String,
    default: "outline"
  },
  strokeWidth: {
    // type: Number,
    default: 3
  },
  name: {
    type: String,
    default: ""
  },
  className: {
    type: String,
    default: "icon"
  }
});
</script>
<style lang="scss" scoped>
//.d_icon{
//  //background: ;
//  align-content: center;
//  justify-content: center;
//}
.menu-icon {
  margin-right: 4px;
  margin-bottom: 1px;
}

.i-icon {
  //margin-bottom: 1px;
}

//.icon-comp{
//  i{
//    margin-right: 4px;
//  }
//}
</style>
